<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .clearFix:before, .clearFix:after {
            content: "";
            display: table;
        }
        .clearFix:after {
            clear: both;
        }
        .clearFix {
            zoom: 1;
        }
        ul {
            display: block;
        }
        li {
            float: left;
            list-style: none;
            width: auto;
            height: 20px;
            margin-right: 10px;
            padding: 5px;
            background-color: pink;
            border: 1px solid black;
        }
        .picSwitch {
            width: 500px;
        }
        .picSwitch img{
            width: 70%;
        }
    </style>
    <script>

        function myClick(idStr, fun){
            let btn = document.getElementById(idStr);
            btn.onclick = fun;
        }
        //点击变色
        window.onload = function(){
            // var bej = document.getElementById("bj");
            var citys = document.getElementById("city");
            var child = citys.childNodes;
            var child2 = citys.children[1].innerHTML;

            console.log(child.length);
            console.log("no1=" + citys.firstChild + "no2=" + citys.lastChild.innerHTML);
            console.log(child2);

            let flag1 = 1;
            myClick("bj", function(){
                if (flag1 == 1){
                    this.style.backgroundColor = "green";
                    flag1 = 0;
                }
                else if(flag1 == 0){
                    this.style.backgroundColor = "pink";
                    flag1 = 1;
                }
                console.log(flag1);
            })

            //切换图片  也可使用数组，用切换索引的方式
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");
            var pic = document.getElementById("pic");
            var info = document.getElementById("info");

            let picArr = ['images/1/1.jpg', 'images/1/2.jpg', 'images/1/3.jpg', 'images/1/4.jpg', 'images/1/5.jpg'];
            let index = 0;
            info.innerHTML = "一共有" + picArr.length + "张图片，当前是第" + (index + 1) +"张";
            prev.onclick = function(){
/*                 if (pic_now <= 1){
                    alert("当前已经是第一张~");
                }
                else {
                    pic.src = "images/1/" + (pic_now - 1) + ".jpg";
                    pic_now--;
                } */
                if (index <= 0){
                    alert("当前已经是第一张~为您切换到最后一张~");
                    index = picArr.length - 1;
                    pic.src = picArr[index];
                    info.innerHTML = "一共有" + picArr.length + "张图片，当前是第" + (index + 1) +"张";
                }
                else {
                    index--,
                    pic.src = picArr[index];
                    info.innerHTML = "一共有" + picArr.length + "张图片，当前是第" + (index + 1) +"张";
                }

            }
            next.onclick = function(){
                if (index >= picArr.length - 1){
                    alert("当前已经是最后一张~为您切换到第一张~");
                    index = 0;
                    pic.src = picArr[index];
                    info.innerHTML = "一共有" + picArr.length + "张图片，当前是第" + (index + 1) +"张";
                }
                else {
                    index++,
                    pic.src = picArr[index];
                    info.innerHTML = "一共有" + picArr.length + "张图片，当前是第" + (index + 1) +"张";
                }
            }
        }
    </script>
</head>
<body>
    <ul class="city clearFix" id="city">
        <p>你喜欢哪个城市？</p>
        <li id="bj">北京</li>
        <li>上海</li>
        <li>东京</li>
        <li>首尔</li>
    </ul>

    <div class="picSwitch">
        <p id="info"></p>
        <img src="images/1/1.jpg" alt="" id="pic">
        <button id="prev">上一张</button>
        <button id="next">下一张</button>
    </div>
</body>
</html>